<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="充值"></u-navbar>
		<view class="main">
			<view class="lable">
				充值金额
			</view>
			<view class="inputBox">
				<text>¥</text>
				<input type="text" placeholder="请输入提现金额" v-model="money" />
			</view>
			<view class="lable">
				充值方式
			</view>
			<view class="withdrawBox">
				<view class="withdraw-li" v-for="(pay,pays) in payList" :key='pays'>
					<image class="icon" :src="pay.icon" mode=""></image>
					<view class="tit">
						{{pay.title}}
					</view>
					<u-checkbox shape="circle" v-model="pay.checked" @change="changeFn" :name="pay.title"></u-checkbox>
				</view>
				<view class="withdraw-li" style="border-bottom: none;">
					<image class="icon" src="../../../static/imgs/yinlian.png" mode=""></image>
					<view class="tit">
						银行卡
					</view>
					<view class="next" @click="showCard=!showCard" v-if="bankList.length">
						<u-icon name="arrow-down" color="#999999" size="32"></u-icon>
					</view>
					<view class="next" @click="navTo('../bankCard/add')" v-else>
						<text>去添加</text>
						<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
				</view>
				<view class="card-ul" v-if="showCard">
					<view class="card-li" v-for="(bank,index) in bankList" :key='index'>
						<image src="../../../static/imgs/yinlian.png" mode=""></image>
						<view class="tit">
							{{bank.bank_name}}
						</view>
						<u-checkbox shape="circle" v-model="bank.checked" :name="bank.bank_number" @change="bankChange"></u-checkbox>
					</view>
					<view class="moreCrad" @click="navTo('../bankCard/add')">
						<u-icon name="plus-circle" color="#3587F7" size="32"></u-icon><text style="margin-left: 8rpx;">添加银行卡</text>
					</view>
				</view>
			</view>
			<view class="sunBtn" @click="submiBtn">
				充值
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '../../../api/index.js'
	export default {
		data() {
			return {
				money:'',//提现金额
				showCard: false,
				bankList: [],
				payList: [{
						icon: '../../../static/imgs/weixinzf.png',
						title: '微信',
						checked: false
					},
					{
						icon: '../../../static/imgs/zhifubaozf.png',
						title: '支付宝',
						checked: false
					},
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getMyb_card()
		},
		methods: {
			// 提现
			submiBtn(){
				let {money} =this
				if(!money){
					uni.showToast({
						title:'请输入提现金额',
						icon:'none'
					})
					return
				}
				
			},
			changeFn(e) {
				this.bankList.forEach(item => {
					item.checked = false
				})
				this.payList.forEach(item => {
					if (item.title == e.name) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
			},
			bankChange(e) {
				// 处理之前已选择
				this.payList.forEach(item => {
					item.checked = false
				})
				this.bankList.forEach(item => {
					if (item.bank_number == e.name) {
						item.checked = true
					} else {
						item.checked = false
					}
				})

			},
			async getMyb_card() {
				let res = await myRequest.getBankcard({
					page: '1',
					num: '100'
				})
				if (res.status) {
					res.data.forEach(item => {
						item.checked = false
					})
					this.bankList = res.data
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 20rpx;

		.lable {
			height: 100rpx;
			text-align: left;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}

		.inputBox {
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 38rpx;

			input {
				text-indent: 12rpx;
			}
		}

		.withdrawBox {
			width: 710rpx;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.withdraw-li {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F2F2F7;

				.icon {
					width: 48rpx;
					height: 48rpx;
				}

				.tit {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
				}

				.next {
					margin-left: auto;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;

					text {
						margin-right: 10rpx;
					}
				}
			}

			.card-ul {
				padding-bottom: 16rpx;

				.card-li {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					.tit {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
					}
				}

				.moreCrad {
					width: 100%;
					height: 66rpx;
					line-height: 66rpx;
					text-align: center;
					background: #F2F2F7;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
				}
			}
		}

		.sunBtn {
			margin: 100rpx auto 0;
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #FB8703 0%, #F7270C 100%);
			border-radius: 16rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	/deep/ .u-checkbox {
		margin-left: auto;
	}

	/deep/ .u-checkbox__label {
		margin-left: 0;
		margin-right: 0;
	}
</style>